<!-- 视频详情页 -->
<template>
	<view class="video-detail">
		<view class="video-detail__box">
<!-- 			<view class="video-detail__header flex wrapper">
				<text class="video-detail__header-title">{{videoData.video_title}}</text>
				<img src="/static/more.png" alt="更多的小图标" class="video-detail__header-icon" />
			</view> -->
			<!-- TODO：这里有可选的:视频清晰度、速率、作者信息等其他数据需要display -->
			<video
				class="video-detail__video"
				:show-fullscreen-btn="false"
				:src="playUrl"
			>	
			</video>
		</view>
		
		<view class="video-detail__main">
			<view class="video-detail__title wrapper">{{videoData.video_title}}</view>
			<view class="video-detail__desc wrapper flex">
				<text class="video-detail__desc-text">简介：</text>
				<image class="video-detail__desc-icon" src="/static/video/rightArrow.png" mode="aspectFill"></image>
			</view>
			
			<view class="video-detail__drama">
				
				<view class="video-detail__drama-series flex wrapper">
					<text class="video-detail__drama-series--black">剧集</text>
					<text>{{videoData.show_series}}</text>
					<image class="video-detail__drama-series-icon" src="/static/video/rightArrow.png" mode="aspectFill"></image>
				</view>
				
				<view class="video-detail__drama-items flex">
					
					<view class="video-detail__drama-item"
					v-for="item in videoData.datas"
					:key="item.id"
					@click="changePlayUrl(item.video_url)"
					>
						{{item.video_series_title}}
					</view>
					
				</view>
			</view>
			
			
			
			<!-- 猜你喜欢部分 -->
			<view class="video-detail__like wrapper">
				<text class="video-detail__like-title">猜你喜欢</text>
				<view class="video-detail__like-items">
					
					<video-display-item
					class="video__display-item"
					v-for="(item,index) in videoData.like_datas"
					:key="item.id"
					:item="item"
					:is-short="false"
					:active-index="index"
					@on-click-video="onClickVideo"
					></video-display-item>
					
				</view>
			</view>
			
			<!-- 底部数据显示部分 -->
			<view class="video-detail__data flex">
				
				<view class="video-detail__data-item flex-column">
					<text>{{videoData.bf_num}}</text>
					<text>播放量</text>
				</view>
				
				<view class="video-detail__data-item flex-column">

					<text>{{videoData.download_num}}</text>
					<image class="video-detail__data-icon" src="/static/video/download.png" mode="aspectFill"></image>
				</view>
				
				<view class="video-detail__data-item flex-column">
					<text>{{videoData.comment_num}}</text>
					<image class="video-detail__data-icon" src="/static/video/comment.png" mode="aspectFill"></image>
				</view>
				
				<view class="video-detail__data-item flex-column">
					<text>{{videoData.share_num}}</text>
					<image class="video-detail__data-icon" src="/static/video/share_gray.png" mode="aspectFill"></image>
				</view>
				
				<view class="video-detail__data-item flex-column">
					<text>{{videoData.subscribes}}</text>
					<image class="video-detail__data-icon" src="/static/video/subscribe.png" mode="aspectFill"></image>
				</view>
				
			</view>
		</view>
		

	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import decVideoApi from "/api/dec/decIndex/decVideoApi";
	import videoDisplayItem from '@/components/videoDisplayItem/videoDisplayItem.vue';
	
	// 使用 ref 创建响应式数据
	const videoData = ref({});// 当前视频Data
	const recommend = ref([]);// 猜你喜欢	
	
	const playUrl = ref();
	
	const props = defineProps({
	  id: {
	    type: String,
		// required: true
	  },
	});
	
	function onClickVideo(data){
		// isClickVideo.value = data.isClick;
		// activeIndex.value = data.activeIndex;
		// console.log('点击的短视频序号：',activeIndex.value);
	}
	
	function changePlayUrl(url){
		console.log('点击更改了播放的视频');
		playUrl.value = url;
	}
	
	async function init (){
		videoData.value = await Get_video_detail(props.id);
		recommend.value = await Gf_video_list();
		playUrl.value = videoData.value.video_url;
		// console.log("videoData:", videoData.value);
		// console.log("recommend.value:", recommend.value);
	}
	
	// 获取视频详情
	async function Get_video_detail(video_id){
		if(!video_id) {
			console.error('视频id为空，无法获得视频信息，请重试');
			return null;
		}
		let params = {
			video_id: video_id,
		};
		try {
		    const res = await decVideoApi.Get_video_detail_API(params);
		    console.log('Get_video_detail_API 获取视频详情 成功 :', res);
		    return res;
		} catch (err) {
		    console.error('Get_video_detail 获取视频详情 失败: ', err);
		    return null;
		}
	}
	 
	// 推荐视频列表
	async function Gf_video_list() {
		let params = {
			page: '',		// 第几页
			per_page: '',	// 每页有几条
			get_type: '',	// 获取类型(默认是0)
		};
		try {
		    const res = await decVideoApi.Gf_video_list_API(params);
		    console.log('Gf_video_list_API 推荐视频列表 成功 :', res);
		    return res;
		} catch (err) {
		    console.error('Gf_video_list 推荐视频列表 失败: ', err);
		    return null;
		}
	}
	
	
	
	onMounted(()=>{
		init();
	})
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
	align-items: center;
}

.wrapper{
	width: 100%;
	box-sizing: border-box;
	padding: 0 24rpx;
}
	
.video-detail{
	width: 100%;
	height: 100%;
	&__box{
		width: 100%;
		position: relative;
	}
	
	// 头部
	&__header{
		position: absolute;
		height: 100rpx;
		background-color: rgba(0,0, 0, .5);
		// background-color: red;
		z-index: 10;
		justify-content: space-between;
		box-sizing: border-box;
		// padding: 0 50rpx;
		
		&-icon{
			width: 50rpx;
			height: 50rpx;
			object-fit: cover;
		}
		
		&-title{
			width: 600rpx;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #fff;
			margin-left: 20rpx;
		}
	}
	
	// 视频样式
	&__video{
		width: 100%;
		height: 400rpx;
	}
	
	&-main{
		width: 100%;
	}
	
	// 视频标题
	&__title{
		font-size: 34rpx;
		// margin: .3em auto;
		// margin-bottom: 1em;
		margin: 20rpx 0;
	}
	
	// 简介
	&__desc{
		margin-bottom: 60rpx;
		&-text{
			display: inline-block;
			width: 660rpx;
			overflow-x: hidden;
			text-overflow: ellipsis;
			white-space:nowrap;
			font-size: 26rpx;
			color: #575958;
		}
		
		&-icon{
			width: 16rpx;
			height: 16rpx;
		}
	}
	
	// 剧集
	&__drama{
		margin-bottom: 60rpx;
		// 文字部分
		&-series{
			font-size: 26rpx;
			color: #575958;
			margin-bottom: 20rpx;
			&--black{
				font-size: 32rpx;
				color:#333333;
				padding-right: 10rpx;
			}
			
			&-icon{
				width: 16rpx;
				height: 16rpx;
				margin-left: 5rpx;
			}
		}
		
		&-items{
			margin-left: 24rpx;
		}
		
		&-item{
			width: fit-content;
			font-size: 30rpx;
			color:#333333;
			padding: .5em 1em;
			background-color: #e4e4e4;
			border-radius: 6rpx;
			margin-right: 12rpx;
			flex-shrink: 0;
		}
	}
	
	// 猜你喜欢
	&__like{
		&-title{
			font-size: 32rpx;
			color: #333;
		}
		&-items{
			margin-top: 20rpx;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			justify-content: space-between;
			grid-row: auto;
			grid-row-gap: 20rpx;
		}
	}
	
	// 底部数据展示
	&__data{
		width: 100%;
		height: 132rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		justify-content: space-around;
		&-item{
			height: 88rpx;
			justify-content: space-between;
			font-size: 22rpx;
			color: #535353;
			align-items: center;
		}
		&-icon{
			width: 40rpx;
			height: 40rpx;
		}
	}
	
}
</style>
